<template>
  <d2-container better-scroll>
    <template>
      <el-table :data="tableData" v-loading="loading" border style="width: 100%">
        <el-table-column prop="userId" label="ID" width="60"></el-table-column>
        <el-table-column prop="userName" label="姓名" width="120"></el-table-column>
        <el-table-column prop="sex" :formatter="formatSex" label="性别" width="100"></el-table-column>
        <el-table-column prop="marriage" :formatter="formatMarriage" label="婚否" width="100"></el-table-column>
        <el-table-column prop="address" label="住址" width="150"></el-table-column>
        <el-table-column prop="work" label="工作单位" width="120"></el-table-column>
        <el-table-column prop="position" label="职位"></el-table-column>
        <el-table-column prop="isVip" :formatter="formatIsVip" label="VIP"></el-table-column>
        <el-table-column prop="vipEndTime" label="注册时间" width="200"></el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              <el-button
              size="mini"
              type="primary"
              @click="handleVipBill(scope.$index, scope.row)">查看VIP账单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template slot="footer">
      <el-pagination
        :current-page="pageNum"
        :page-size="size"
        :total="totalCount"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </template>
  </d2-container>
</template>

<script>
import { getUserPage } from '@api/user.management'
export default {
  data () {
    return {
      loading: false,
      totalCount: 0,
      pageSize: 10,
      pageNum: 1,
      keyword: '',
      tableData: [],
      page: {
        pageCurrent: 1,
        pageSize: 10,
        pageTotal: 0
      }
    }
  },
  mounted: function () {
    this.getUserPageRequest()
  },
  methods: {
    formatMarriage: function (row, column, cellValue) {
      if (cellValue === 1) {
        return '已婚'
      } else if (cellValue === 2) {
        return '未婚'
      } else {
        return '保密'
      }
    },
    formatSex: function (row, column, cellValue) {
      if (cellValue === 0) {
        return '保密'
      } else if (cellValue === 1) {
        return '男'
      } else if (cellValue === 2) {
        return '女'
      }
    },
    formatIsVip: function (row, column, cellValue) {
      if (cellValue === 1) {
        return '是'
      } else {
        return '否'
      }
    },
    getUserPageRequest: function () {
      this.loading = true
      getUserPage({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        keyword: this.keyword
      })
        .then(res => {
          this.loading = false
          this.totalCount = res.totalCount
          this.pageSize = res.pageSize
          this.tableData = res.users
        })
        .catch(err => {
          console.log(err)
        })
    },
    handlePaginationChange (val) {
      this.$notify({
        title: '分页变化',
        message: `当前第${val.current}页 共${val.total}条 每页${val.size}条`
      })
      this.pageSize = val.size
      this.totalCount = val.total
      this.pageNum = val.current
      // nextTick 只是为了优化示例中 notify 的显示
      this.$nextTick(() => {
        this.getUserPageRequest()
      })
    },
    handleVipBill: function (index, row) {
      this.$router.push({
        name: 'user-bill-page',
        params: {
          userId: row.userId
        }
      })
    }
  }
}
</script>
